<template>
  <div class="upward">
    <img src="../assets/路径.png" alt="" />
    <span class="text">位置选择</span>
  </div>
  <div class="content">
    <div class="box">
      <span v-if="!isManualInput">
        <img class="green" src="../assets/ic_origin备份.png" alt="" />
        <!-- 显示选中的终点城市，点击时弹出城市选择 -->
        {{ endCity }}<img class="tri" src="../assets/矩形.png" alt="" @click="showCity" />
      </span>
      <van-field v-model="keyword" placeholder="你要去哪儿" />
    </div>
  </div>
  <div class="down"></div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import { useCityStore } from '@/stores/cityStore.js'
import { createSignHeader } from '@/crypto/a1.js'

const router = useRouter()
const route = useRoute()
const cityStore = useCityStore()

// 从路由参数中获取城市名称
const city = route.query.city

// 终点城市
const endCity = computed({
  get: () => cityStore.endCity,
  set: (newValue) => {
    cityStore.setEndCity(newValue)
  }
})
console.log(endCity)

// 用户是否手动输入了keyword
const isManualInput = ref(false)

// 初始化keyword
const keyword = ref('')

// 监听keyword的变化，如果用户手动输入，则更新标志
watch(keyword, (newVal) => {
  if (newVal && newVal.trim() !== '') {
    isManualInput.value = true // 用户开始输入，设置标志为true
  }
})

// 显示城市选择页面，并设置标志为false
function showCity() {
  isManualInput.value = false // 用户选择城市，设置标志为false
  router.push('/cities')
}

async function test1() {
  const path = '/s/p5/map/proxy'
  const params = {
    url: '/ws/place/v1/suggestion',
    method: 'get',
    args: {
      key: 'P6TBZ-IMXWX-7JY4J-TSTBX-LODWT-CQBCU',
      keyword: keyword.value, // 使用用户输入的keyword
      region: city
    }
  }
  const now = Date.now()
  const gmt = new Date(now).toUTCString()
  const header = createSignHeader(path, params, gmt)

  try {
    const response = await axios.post(`https://newapi-test.bbxhc.com${path}`, params, {
      headers: {
        ...header,
        at: 401,
        tm: now,
        av: '202409281550',
        ci: 'bbx24306',
        di: 'ffe882f016e9df3d7c091f936c54c0c6',
        qr: '',
        to: 'bWgPZwAAAAABAJO33qHphHS76iRLHJKDfSUHVbgFbnahqUKbgyftMIMBmMsypmwBreVKbGnMUpQvFElfURuhkYrGJAAAAA=='
      }
    })
    if (response.status === 200) {
      console.log(response.data.result)
    } else {
      const message = response.data.message || '请求异常'
      console.error(message)
    }
  } catch (err) {
    console.error(err)
  }
}

// 组件挂载后执行test1，并设置初始的终点城市
onMounted(() => {
  test1()
  if (city) {
    endCity.value = city //如果city有值，则endCity（终点城市）就是通过路由传入页面中的city参数
  }
})
</script>
<style scoped>
.upward img {
  margin-left: 0.27rem;
  width: 0.19rem;
  height: 0.32rem;
}
.upward {
  width: 7.5rem;
  height: 1.76rem;
}
.text {
  font-weight: 500;
  font-size: 0.34rem;
  text-align: center;
  margin-left: 3.07rem;
}
.content {
  width: 7.5rem;
  height: 1.26rem;
  background: #ffffff;
}
.box {
  display: flex;
  width: 6.7rem;
  height: 0.88rem;
  background: #f4f6f8;
  border-radius: 20px;
  margin-left: 0.4rem;
  align-items: center;
}
.box span {
  font-size: 0.32rem;
  width: 2.2rem;
  height: 0.44rem;
}
.green {
  width: 0.14rem;
  height: 0.14rem;
  margin-left: 0.1rem;
}
.tri {
  width: 0.18rem;
  height: 0.09rem;
  padding-left: 0.1rem;
}
.down {
  width: 7.5rem;
  height: 123.3rem;
  background: #ffffff;
}
</style>
